 /**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
 @charset "UTF-8";
//  @import './theme/element-variables.scss';
//  @import '../../node_modules/@openatc/edgebase-front/src/styles/common.scss';
 @import './mixin.scss';
 // 整体背景色
 .app-wrapper1 {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  background: $--background-color-base;
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
    color: $--color-primary;
  }
}
.borderStyle {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid $--border-color-lighter;
  .el-button--text {
    font-size: 14px;
  }
}
.msgTitle {
  color: $--color-text-secondary;
  padding: 5px 0;
}
.msgTitles {
  color: $--color-text-secondary;
  padding: 0;
}
.msgTitleEventtype {
  color: $--color-text-secondary;
  margin: 0 0 5px 0;
}
.msgValue {
  color: $--color-text-primary;
  padding-left: 5px;
}
.openatc-navbar {
  box-shadow: 0PX 0PX 11PX 0PX rgba(0, 64, 125, 0.14);
  .el-drawer__header {
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0px;
    color: $--color-text-primary;
  }
  .el-drawer__body { 
    overflow: auto; 
  }
  .isopen {
    text-align: right;
    margin:10px 16px;
    color: $--color-text-primary;
  }
  .el-drawer__container::-webkit-scrollbar { 
    display: none; 
  }
  .btnBottom {
    text-align: right; 
    padding: 5px 0 0 0;
    border-top: 1px solid $--border-color-lighter;
    .el-button--text {
      font-size: 16px;
    }
  }
  .grid-content{
    letter-spacing: 0px;
    color: $--color-text-primary;
  }
  .grid-content-label {
    color: $--color-text-secondary;
  }
  .empty{
    text-align: center;
    color: $--color-text-regular;
    .noInfo{
      margin: 10px 0 0 22px;
    }
  }
}
.appMain {
  height: calc(100% - 55PX);
  // background: $--color-white;
  background-color: $--background-color-base;
}

// 右浮动筛选项common样式
.filter-container {
  float: right;
  margin-top: 20PX;
  margin-right: 20PX;
  .el-form-item {
    margin-bottom: 20PX;
    button, .el-input {
      float: left;
      margin-left: 20PX;
    }
  }
  .filters {
    float: left;
    margin-left: 20PX;
    margin-bottom: 20PX;
    .header-span {
      color: $--color-text-secondary;
      font-size: 14PX;
      font-weight: normal;
      font-stretch: normal;
      line-height: 14PX;
    } 
  }
  .filterRight {
    overflow: hidden;
    float: right;
  }
}
// 整页表格 commom 样式
.onePageTable {
  background-color: $--background-color-base;
  padding-top: 15PX;
  height: 100%;
  .commonTablePanel {
    background-color: $--color-white;
    height: 100%;
    .common-table-header {
      overflow: hidden;
    }
    .common-table-title-container {
      float:left;
      margin-top: 20PX;
      margin-left: 20PX;
    }
    .common-table-title {
      float: left;
      text-align: center;
      font-size: 18PX;
      font-weight: bold;
      color: $--color-text-primary;
      height: 40PX;
      line-height: 40PX;
    }
    .atc-table {
      margin: 0 20PX;
      border: solid 1PX $--border-color-lighter;
      overflow: auto;
    }
  }
}


.common-date-popper {
  //日期选择器弹窗的快捷选项太多，被底部遮挡
  .el-picker-panel__sidebar {
    bottom: 45px;
    border-color: $--border-color-lighter;
  }
  .el-date-range-picker__time-header {
    border-color: $--border-color-lighter;
  }
  .el-picker-panel__footer {
    border-color: $--border-color-lighter;
  }
  .el-date-range-picker__content.is-left {
    border-color: $--border-color-lighter;
  }
}
.el-range-editor .el-range-input {
  background-color: $--color-white;
}

// json插件样式
.json-view-modal {
  overflow: auto;
  .json-view-container {
    background-color: $--color-white !important;
    .json-view {
      padding-left: 0.2rem !important;
      .json-item {
        padding-left: 0.2rem !important;
      }
    }
  }
}

 // 主页样式
 .system-status-pop-content {
   padding: 5px 11px;
   .tittle {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: $--color-text-primary;
    line-height: 14px;
    margin-bottom: 8px;
   }
   .detail {
     .detail-item {
       overflow: hidden;
       font-size: 14px;
       >span {
         float: left;
         margin-top: 14px;
       }
      .label {
        // max-width: 180px;
        margin-right: 26px;
        color: $--color-text-regular;
      }
      .content {
        color: $--color-text-primary;
      }
     }
   }
 }
 .homeLayout, .homeLayouts {
    padding: 18px;
    background-color: $--background-color-base;
    height: calc(100vh - 53PX);
    .panel {
      height: 164px;
      // margin-top: 18px;
      margin-bottom: 16px;
      // height: calc(19% - 19PX);
      .crossStatusNum {
        height: 100%;
        .status-type {
          height: 100%;
          padding: 24px 0px;
          box-sizing: border-box;
          // .el-row, .el-col {
          //   height: 190px;
          // }
          .tpye-item {
            // height: 116px;
            height: 100%;
            padding: 0 58px;
            // padding-left: 54px;
            border-radius: 10px;
            position: relative;
            .state {
              // float: left;
              font-size: 14px;
              // margin-top: 30px;
              position: absolute;
              left: 164px;
              top: 30px;
              .type {
                height: 18px;
                font-size: 18px;
                font-weight: bold;
                color: $--color-text-primary;
              }
              .compYest {
                height: 14px;
                font-size: 14px;
                font-weight: 500;
                color: $--color-text-regular;
                margin-top: 12px;
                .compnum {
                  display: inline-block;
                  min-width: 44px;
                  height: 24px;
                  background: $--color-black;
                  border-radius: 4px;
                  margin-left: 10px;
                  text-align: center;
                  line-height: 24px;
                }
              }
            }
            .num {
              float: left;
              width: 59px;
              font-size: 56px;
              font-weight: bold;
              color: $--color-text-primary;
              // margin-top: 23px;
              // margin-left: 35px;
              position: absolute;
              right: 80px;
              top: 23px;
              text-align: right;
            }
            .pointernum {
              cursor: pointer;
            }
            .Img {
              float: left;
              height: 77px;
              width: 77px;
              // background-size: 77px 77px;
              // background-repeat: no-repeat;
              // background-position:center center;
              margin-right: 32px;
              margin-top: 23px;
            }
            // .upImg {
            //   background-image: url('../../assets/home/online.png');
            //   }
            // .downImg {
            //   background-image: url('../../assets/home/offline.png');
            //   }  
            // .troubleImg {
            //   background-image: url('../../assets/home/trouble.png');
            // }
            // .interveneImg {
            //   background-image: url('../../assets/home/intervene.png');
            // } 
          }
        }
      }
    }
    .cardlayout {
      margin-right: 18px;
      width: calc(100% - 18px);
      height: 100%;
    }
    .top {
        // height: 333px;
        height: calc(48% - 82px);
        margin-bottom: 17px;
        // height: calc(38% - 19PX);
        .chart {
          height: calc(100% - 52px);
          .mode-charts-panel-en {
            .name {
              width: 235px !important;
              margin-right: 20px !important;
            }
          }
          .mode-charts-panel {
            height: 100%;
            .mode-charts {
              float: left;
              width: 95%;
              height: calc(100% - 60px);
              margin-top: 20px;
            }
            .legend {
              // float: left;
              padding-top: 10px;
              .mode-item {
                // float: left;
                // width: 50%;
                margin-bottom: 18px;
                height: 30px;
                > span {
                  float: left;
                }
                .mark {
                  float: left;
                  width: 10px;
                  height: 10px;
                  margin-top: 11px;
                  margin-right: 7px;
                }
                .name {
                  width: 120px;
                  font-size: 14px;
                  font-weight: 400;
                  color: $--color-text-regular;
                  line-height: 35px;
                  margin-right: 29px;
                  cursor: pointer;
                }
                .num {
                  font-size: 24px;
                  font-weight: bold;
                  color: $--color-text-primary;
                  line-height: 35px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .system-list {
          height: calc(100% - 52px);
          .system-status {
            height: calc(100% - 30px);
            .system-status-table {
              font-size: 14px !important;
            }
          }
        } 
      }
    .bottom {
      // height: 350px;
      height: calc(49% - 82px);
      // margin-bottom: 19PX;
      // height: calc(43% - 19PX);
      .chart {
        height: calc(100% - 52px);
        .control-charts-panel-en {
          .name {
            width: 130px !important;
          }  
        }
        .control-charts-panel {
          height: 100%;
          .control-charts {
            float: left;
            height: calc(100% - 60px);
            margin-top: 20px;
            width: 95%;
          }
          .legend {
            // width: 53%;
            // float: left;
            padding-top: 30px;
            .title {
              font-size: 16px;
              font-weight: 500;
              color: $--color-text-primary;
              margin-bottom: 30px;
            }
            .control-item {
              // float: left;
              // width: 50%;
              margin-bottom: 18px;
              height: 30px;
              > span {
                float: left;
              }
              .mark {
                float: left;
                width: 10px;
                height: 10px;
                margin-top: 11px;
                margin-right: 7px;
              }
              .name {
                width: 100px;
                font-size: 14px;
                font-weight: 400;
                color: $--color-text-regular;
                line-height: 35px;
                margin-right: 29px;
                cursor: pointer;
              }
              .num {
                font-size: 24px;
                font-weight: bold;
                color: $--color-text-primary;
                line-height: 35px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .cross-abnormal-en {
        padding: 0 10px !important;
        .content {
          max-width: 160px !important;
        }
      }
      .cross-abnormal {
        width: 100%;
        padding: 0 66px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 66px;
        .abnormal-item {
          height: 48px;
          margin-bottom: 60px;
          // overflow: hidden;
          .markIcon {
            float: left;
            width: 48px;
            height: 48px;
            margin-right: 20px;
            .model-icon {
              width: 48px;
              height: 48px;
            }
          }
          .content {
            float: left;
            cursor: pointer;
            .name {
              font-size: 14px;
              font-weight: 400;
              color: $--color-text-regular;
            }
            .num {
              font-size: 24px;
              font-weight: bold;
              color: $--color-text-primary;
            }
          }
        }
      }
    }
      .el-row {
          height: 100%;
          &:last-child {
            margin-bottom: 0;
          }
      }
      .el-col {
        height: 100%;
      }
      .imagebox {
        margin: 0 auto;
        height: 100%;
      }
      .toPage {
        // width: 72px;
        font-size: 20PX;
        text-align: center;
        margin: 60px 0 0 0;
        color: $--color-text-regular;
        .iconfont {
          cursor: pointer;
        }
      }
      .icon-qianwang {
        color: $--color-primary;
        font-size: 20px;
      }
      .user-manage {
        background: url('../../assets/home/usersManage.png');
        background-repeat: no-repeat;
        background-position:center center;
      }
      .operation-record {
        background: url('../../assets/home/operateRecord.png');
        background-repeat: no-repeat;
        background-position:center center;
      }
      .animationPart {
        position: relative;
        text-align: center;
        height: 70%;
        .imgindex{
          width: 330px;
          height: 200px;
          margin-top: 80px;
        }
      }
 }
 .homeLayouts {
  .top {
    height: 49%;
  }
  .bottom {
    height: 49%;
  }
}
 .faultList {
    height: 100%;
    padding: 12px 6px;
    .total {
        // width: 554px;
        height: 54px;
        background: $--color-black;
        // margin-bottom: 24px;
        display: flex;
        align-items: center;
        position: relative;
        .Img {
          float: left;
          margin-left: 13px;
          margin-right: 6px;
          height: 30px;
          width: 30px;
          background-size: 30px 30px;
          background-repeat: no-repeat;
          background-position:center center;
          background-image: url('../../assets/home/trouble.png');
        }
        .text {
            float: left;
            font-size: 14px;
            letter-spacing: 0px;
            color: $--color-text-regular;
        }
        .num {
            // float: right;
            position: absolute;
            right: 36px;
            font-size: 32px;
            letter-spacing: 0px;
            color: $--color-text-primary;
            cursor: pointer;
        }
    }
    .title {
      overflow: hidden;
      width: 100%;
      // margin-bottom: 30px;
      > div {
        float: left;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0px;
        color: $--color-text-secondary;
      }
      .faultNum {
        float: left;
        // width: 295px;
        text-align: center;
      }
    }
    .content {
      overflow-y: auto;
      .typeName {
        float: left;
        // width: 116px;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0px;
        color: $--color-text-regular;
      }
      .list {
        float: left;
      }
    }
    .el-table thead {
      color: $--color-text-regular;
    }
}
.leftPart .chartPart .el-progress--circle .el-progress__text .content .sum {
    font-size: 66px;
    color: $--color-text-primary;
    text-align: center;
  }
.leftPart .chartPart .el-progress--circle .el-progress__text .content .text {
    font-size: 14px;
    color: $--color-text-regular;
    text-align: center;
    margin-top: 15px;
}
.devsStatePart {
    height: 100%;
    .el-row {
        height: 100%;
    }
    .el-col {
      height: 100%;
    }
    .leftPart {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // flex-wrap: wrap;
      justify-content: center;
      .chartPart {
        text-align: center;
      }
      .lengendPart {
        width: 100%;
        height: 50px;
        text-align: center;
        color: $--color-text-regular
      }
      .upLengend {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #53c776;
          border-radius: 50%;
          margin-right: 5px;
      }
      .downLengend {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: rgb(229, 233, 242);
          border-radius: 50%;
          margin-left: 32px;
          margin-right: 5px;
      }
    }
    .rightPart {
        // padding-top: 88px;
        height: 100%;
        display: flex;
        flex-direction: column;
        // flex-wrap: wrap;
        justify-content: center;
        > div {
            width: calc(100% - 50px);
            background-color: $--color-black;
            display: flex;
            align-items: center;
        }
        .stateGroup {
          overflow: hidden;
          width: 75px;
          margin: 5px auto;
        }
        .state {
          float: left;
          font-size: 14px;
          color: $--color-text-regular;
        }
        .toJump {
          cursor: pointer;
        }
        .offlinestate {
          width: 100%;
        }
        .desc {
            text-align: center;
        }
        .Img {
            height: 66px;
            width: 66px;
            background-size: 66px 66px;
            background-repeat: no-repeat;
            background-position:center center;
            margin: 0 13.5% 0 18%;
        }
        .devsUp {
            > div {
                float: left;
            }
            .upImg {
                background-image: url('../../assets/home/online.png');
            }
            .num {
                font-size: 54px;
                color: #53c776;
            }
        }
        .devsDown {
            margin-top: 46px;
            > div {
                float: left;
            }
            .downImg {
                background-image: url('../../assets/home/offline.png');
            }
            .num {
                font-size: 54px;
                color: #b9b9b9;
            }
        }
    }
}
.cardBoxs:hover {
  box-shadow: 0px 0px 16px 0px rgba(0,56,76,0.14);
  border: 2px solid #299bcc;
  cursor: pointer;
}
.cardBox, .cardBoxs {
    background-color: $--color-white;
    padding: 0 22px;
    .cardTitle {
        height: 52px;
        line-height: 52px;
        // border-bottom: 1px solid $--border-color-base;
        font-size: 18px;
        color: $--color-text-primary;
      }
  }
// GIS页面样式
.gis-devicePanel {
  height: 100%;
  .filters {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    // margin-right: 10px;
  }
  .devicePanel {
    border: solid 1px $--border-color-lighter;
    height: 100%;
  }
  .addbtn {
    padding: 0;
    width: 12.5%;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    min-width: 66px;
    margin-bottom: 7px;
  }
  .el-table thead {
    color: $--color-text-regular;
  }
  .el-dialog__body {
    padding: 30PX 72Px 30PX 0;
    .el-form-item {
      margin-bottom: 10PX;
    }
  }
  .el-dialog__footer {
    padding: 10PX 72PX 38PX 0;
  }
}
// GIS页面样式
.leaflet-container {
  font-size: 12px;
  line-height: 1.5;
}
.openatc-gis {
  height: calc(100vh - 53PX);
  position: relative;
  .base-dialog{
    .my-dialogs{
      .el-dialog__body{
        padding: unset;
      }
      position: fixed;
      left: 20PX;
      top: -30PX;
      height: 330PX;
      width:420PX;
      .intersection-map .crossDirection-display{
        zoom: 0.7 !important;
      }
    }
  }
  .header {
    position: fixed;
    top: 70px;
    left: 35%;
    width: 280px;
    height: 40px;
    z-index: 904;
    line-height: 35px;
    font-size: 30px;
    background-color: $--color-white;
    text-indent: -5px;
    text-align: center;
  }
  /deep/ .el-radio__input {
      display: none;
  }
  .header-left {
    position: absolute;
    top: 20PX;
    left: 2%;
    width: 180PX;
    height: 40PX;
    z-index: 904;
    line-height: 35PX;
    font-size: 30PX;
    text-indent: -5PX;
    text-align: center;
    .layerControl {
      width: 29%;
      height: 40PX;
      font-size: 14PX;
      float:left;
      background-color: $--color-white;
      color: $--color-text-primary;
    }
    .layerDetail {
      width: 70%;
      float:right;
      background-color: $--color-white;
    }
  }
  // .footer-left {
  //   position: absolute;
  //   bottom: 1rem;
  //   left: 3.3rem;
  //   z-index: 903;
  //   width: auto;
  //   height: auto;
  //   line-height: 1.1rem;
  //   background-color: $--color-white;
  //   border-radius: 0.1rem;
  //   text-align: center;
  //   user-select: none;
  //   font-size: 0.6rem;
  //   color: $--color-text-primary;
  // }
  .footer-right {
    min-width: 288px;
    // height: 16px;
    line-height: 16px;
    background-color: $--color-white;
    border-radius: 6px;
    text-align: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 53px;
    z-index: 903;
    font-size: 10px;
    color: $--color-text-primary;
    padding: 5px 20px;
  }
  .addbtn {
    position: absolute;
    right: 5px;
    /* z-index: 99; */
    top: 7px;
    width: auto;
    height: auto;
  }
  .addicon {
    color: #42daff;
    font-size: 26px;
  }
  .addicon:hover {
    color: rgb(32, 163, 195);
  }
  .toggle_show {
    position: absolute;
    cursor: pointer;
    right: 17PX;
    top: 20PX;
    z-index:904;
  }
  .active {
    position: absolute;
    cursor: pointer;
    right: 17PX;
    top: 20PX;
    z-index:100001;
  }
  .init-toggle {
    position: absolute;
    cursor: pointer;
    right: 440px;
    top: 0px;
  }
  .slide-enter-active {
    transition: all 0.5s linear;
  }
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateX(100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(100%);
    opacity: 0;
  }
  .route-info {
    position: relative;
    float: left;
    margin-top: -10px;
    margin-left: -220px;
    width: 200px;
    border-radius: 20px;
  }
  .route-length {
    top: 70px;
    right: 500px;
    height: 80px;
    background-color: $--color-white;
    box-shadow: 0px 0px 7px 0px 
      rgba(0, 32, 60, 0.12);
    border: solid 1px $--border-color-base;
  }
  .route-length-name {
    float: left;
    margin-top: 5px;
    margin-left: 12px;
    height: 14px;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: $--color-text-secondary;
  }
  .route-length-value {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    height: 25px;
    font-size: 30PX;
    font-weight: bold;
    font-style: italic;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: $--color-primary;
  }
  .route-length-company {
    float: left;
    margin-top: 23px;
    font-style: italic;
    font-size: 14PX;
    font-weight: bold;
    letter-spacing: 0px;
    color: $--color-primary;
  }
  // .showLayouts {
  //   position: fixed;
  //   top: 70PX;
  //   right: 38PX;
  //   width: 470px;
  //   height: auto;
  //   // z-index: 905;
  //   // background-color: $--color-white;
  // }
  .showLayout {
    position: absolute;
    top: 20PX;
    right: 38PX;
    width: 470px;
    height: auto;
    z-index: 905;
    background-color: $--color-white;
  }
  .icon-choose {
    color: $--color-text-secondary;
    margin: -12PX 0;
  }
  .el-icon-location {
    color: $--color-primary;
  }
  .current-button-click {
    color: $--color-primary;
  }
  .leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 6px;
  }
  .leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 40px;
  }
}
//gis device tab
.gis-devicePanel {
  .devicePanel .el-table td,
  .el-table th {
    padding: 3px 0;
  }
  .deviceTable .el-table__row {
    cursor: pointer;
  }
  .el-table .warning-row {
    background: $--color-text-primary;
  }
  .el-table .success-row {
    background: $--color-text-primary;
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 12PX; // 横向滚动条
    height: 12PX; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
  .title {
    margin: 0 0 15px 0 ;
    color: #fff;
  }
  .device-update {
    .dev-update .el-dialog__body {
      padding: 30px 72px 30px 0;
    }
    .el-dialog__footer {
      padding: 10px 72px 38px 0;
    }
    // 自定义校验规则的labal加上*号
    .dev-update .ipLabel .el-form-item__label:before,
    .dev-update .portLabel .el-form-item__label:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}
//gis dutyroute tab
.gis-duteRoute {
  overflow: hidden;
  .title {
    margin: 0 0 15px 0 ;
    color: #fff;
  }
  .dutyRoute-routeCard { 
    width: 100%;
    .btn-bottom {
      float: right;
      margin-top: -5px;
      margin-right: 15px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .grid-content-label {
      color: $--color-text-secondary;
    }
  }
  .block {
    .resttime {
      font-size: 14PX;
      color: $--color-text-secondary;
    }
  }
}
//gis coordination tab
.gis-planchart {
  .title {
    margin: 0 0 15px 0 ;
    color: $--color-primary;
  }
  .planchart-name {
    float: right;
    font-size: 16PX;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: $--color-text-primary;
  }
}
// 设备管理页面样式
.device-part {
  background-color: $--color-white;
}
.openatc-device {    
  .tag-container {
    // position: absolute;
    // float: left;
    // max-width: 34%;
    // overflow: hidden;
  }
  .el-dropdown-link {
    margin-left: 5px;
    cursor: pointer;
    color: $--color-primary;
  }
  .devs-container{
    .tabButton {
      float: left;
      padding-left: 20PX;
      .btn {
        float: left;
        min-width: 100PX;
        padding: 0PX 20PX;
        height: 40PX;
        line-height: 40PX;
        text-align: center;
        font-size: 16PX;
        font-weight: 400;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        cursor: pointer;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    }
    .filter-container {
      float: right;
      margin-top: 20PX;
      margin-right: 20PX;
      .el-input-group__append{
        color: #FFFFFF !important;
        background-color: #299BCC !important;
        border-color:#299BCC !important;
      }
      .el-form-item {
        margin-bottom: 20PX;
        button, .el-input {
          float: left;
          margin-left: 10PX;
        }
      }
      .filters {
        float: left;
        margin-left: 10PX;
        margin-bottom: 20PX;
        .header-span {
          color: $--color-text-secondary;
          font-size: 14PX;
          font-weight: normal;
          font-stretch: normal;
          line-height: 14PX;
        } 
      }
    }
  }
    .devs-table {
      padding: 0 20PX;
    .el-table {
        border: solid 1PX $--border-color-lighter;
      }
    }
  }
  .state-search {
    margin-left: 2PX;
  }
  // 用户管理页面样式
  .openatc-user {
  }
  // 角色管理页面、组织机构样式
  .openatc-role, .openatc-organization {
    .el-dialog__body {
      padding: 30PX 60PX 30PX 0;
      .el-form-item {
        margin-bottom: 10PX;
      }
    }
    .el-dialog__footer {
      padding: 0 60PX 30PX 0;
    }
  }
  // 路线优化
  .routeOptimize {
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    
    .el-dialog__body {
      padding: 0;
    }
    .funcs {
      width: 100%;
      height: 50PX;
      display: flex;
      .title {
        width: 10%;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 15px;
        color: $--color-text-primary;
        font-size: 18PX;
        line-height: 40PX;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
      }
      .btnGroup{
        width: 90%;
        display: flex;
        margin-right: 15PX;
        .btn-left{
          width: 50%;
          display: flex;
          align-items: center;
        }
        .btn-right{
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .container {
      width: 100%;
      height: calc(100vh - 103PX);
      .el-aside {
        height: 100%;
        color: $--color-text-primary;
        border-right: solid 1px $--border-color-lighter;
        background-color: $--color-white;
        .openatc-planmanu {
          .el-menu {
            height: calc(100vh - 150PX);
            max-height: calc(100vh - 150PX);
            overflow-y: auto;
            border-right: none;
            .el-menu-item {
              height: 44px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .el-main {
        height: 100%;
        background-color: $--color-white;
        .main-container {
          border: 0px solid red;
          width: 100%;
          height: 90%;
          margin-top: 10px;
          margin-bottom: 10px;
          .panel-content {
            border: 0px solid green;
            width: 100%;
            height: 680px;
            display: flex;
            flex-direction: column;
            .route-filter-container {
              display: flex;
              justify-content: end;
              flex-wrap: wrap;
              .filter {
                width: 20%;
                border: 0px solid red;
                display: flex;
                padding: 0 0 8px 0;
                justify-content: center;
                align-items: center;
                .header-span {
                  width: 21%;
                  border: 0px solid red;
                  display: flex;
                  justify-content: flex-end;
                  color: $--color-text-secondary;
                  font-size: 14PX;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 14PX;
                } 
              }
            }
            .table-container {
              .app-container {
                background-color: $--color-white;
              }
            }
          }
        }
      }
    }
    .planExecute {
      .content {
        border: solid 1px $--border-color-lighter;
        .success {
          color: $--color-success;
        }
        .danger {
          color: $--color-danger;
        }
        .primary {
          cursor: pointer;
          color: $--color-primary;
        }
      }
      .footer {
        width: 100%;
        height: 55px;
        padding: 0 15px 0 15px;
        display: flex;
        align-items: center;
        .checkbox {
          width: 25%;
          border: 0px solid red;
          display: flex;
          align-items: center;
        }
        .time {
          width: 35%;
          border: 0px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .time-content {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .button {
          width: 40%;
          border: 0px solid red;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  // 绿波协调页面样式
  .greenWaveOptimize {
    // margin-top: 15px;
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    .el-table__expand-icon {
      color: $--color-text-regular;
    }
    .el-aside {
      height: calc(100vh - 53PX);
      color: $--color-text-primary;
      border-right: solid 1px $--border-color-lighter;
      background-color: $--color-white;
      .openatc-planmanu {
        .title {
          display: flex;
          align-items: center;
          height: 30px;
          margin-left: 15px;
          margin-top: 20px;
          margin-bottom: 20px;
          border: 0px solid red;
          color: $--color-text-primary;
          font-size: 18px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 0px;
        }
        .el-menu {
          border: 0px solid red;
          height: calc(100vh - 200px);
          max-height: calc(100vh - 200px);
          overflow-y: auto;
          border-right: none;
          .el-menu-item {
            height: 44px;
            display: flex;
            align-items: center;
          }
        }
        /* 蒙层样式 */
        .mask {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.5;
          z-index: 97;
        }
        /* 原生按钮样式修改 */
        .btnGroup {
          position: relative;
          border: 0px solid red;
          .addbtn {
            position: absolute;
          }
          button {
            cursor: pointer;
          }
        }
        /* 提示框相关 */
        .tipContent > div{
            float: left;
        }
        .tipContent div i {
          color: $--color-primary;
          font-size: 30px;
        }
        .tipContent .text {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 1px;
            color: $--color-primary;
            margin-left: 7px;
            line-height: 42px;
        }
        .tipContent .iconfont {
          color: $--color-primary;
        }
      }
      .addOptimize {
        .devs-table {
          .el-table {
            border: solid 1px $--border-color-lighter;
          }
        }
        .editDistance {
          .distanceContener {
            width:100%;
            height:500px;
            border: 1px solid $--border-color-lighter;
            .title {
              width:100%;
              height:40px;
              border-bottom: 1px solid $--border-color-lighter;
              display:flex;
              justify-content:space-around;
            }
          }
        }
      }
    }
    .el-main {
      height: calc(100vh - 73PX);
      background-color: $--color-white;
      margin-top: 20PX;
      margin-left: 20PX;
      border: 0PX solid yellow;
      .main-planContent {
        position: relative;
        border: 0px solid red;
        height: 100%;
        .sub-title {
          display: flex;
          align-items: center;
          height: 20px;
          // margin-left: 15px;
          // margin-top: 20px;
          // margin-bottom: 15px;
          // margin-top: 10px;
          border: 0px solid red;
          color: $--color-text-primary;
          font-size: 14px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 0px;
        }
        .sub-main {
          border: 0px solid red;
          .app-container {
            background-color: $--color-white;
            border: 0px solid red;
          }
        }
      }
    }
  }
  .tipContent{
    .handicon {
      color: $--color-text-primary;
    }
  }
  .btnGroup .operate .el-dropdown-link {
    color: $--color-primary;
    cursor: pointer;
  }
  .openatc-planchart {
    height: 100%;
    .planchart-top {
        width: 100%;
        min-width: 1600PX;
        .el-select {
          width: 100PX;
        }
        .el-input {
          width: 100PX;
        }
      }
      .planchart-bottom {
        width: 100%;
        // min-width: 1600px;
      } 
      .chart-title  {
        text-align: center;
        font-size: 16PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0px;
        color: $--color-text-primary;
        margin-top: 20PX;
      }
      .echartsStyle {
        border:0px solid red;
        // float: left;
        // width: 1300px;
        // height: 700px;
        width: 90%;
        height: 100%;
      }
      .realtimescheme, .planningscheme {
        background-color: $--color-white;
        height: 50%;
      }
      .bar {
        width: 100%;
        height: 20PX;
        background-color: $--background-color-base;
      }
      .up-card {
        // margin-top: 100px;
        .el-card__header {
          padding: 10PX 20PX;
          border-bottom: 1PX solid $--color-white;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
      }
      .coordination-name {
        float: left;
        margin-top: 8PX;
        margin-left: 10PX;
        font-size: 14PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0px;
        color: $--color-text-secondary;
      }
      .coordination-select {
        float: left;
        margin-left: 10PX;
      }
      .text {
          font-size: 14PX;
        }
      
        .item {
          margin-bottom: 5PX;
          color: $--color-text-secondary;
        }
      
        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }
        .clearfix:after {
          clear: both
        }
        .box-card {
          width: 130PX;
          height: 141PX;
          background-color: $--color-black;
          border-radius: 4PX;
          border: solid 1PX $--border-color-lighter;
          .header-text {
            color: $--color-text-primary;
          }
        }
  }
  .addDeviceDrawer {
    height: 100%;
    position: relative;
    .btnGroup {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        padding: 0 16px;
        display: flex;
        align-items:center;
        .btn {
            width: 50%;
          }
      }
      .devs-container {
        padding: 0 20px;
        overflow: hidden;
      }
      .filter-container {
        float: right;
        width: 100%;
      }
      .devs-table {
        border: solid 1px $--border-color-lighter;
        overflow: auto;
        max-height: 590px;
      }
  }
  .openatc-greenwareoptimize-device {
    .devicePanel {
        border: solid 1px $--border-color-lighter;
      }
      .addbtn {
        padding: 0;
        width: 70PX;
        height: 32PX;
        text-align: center;
        float: right;
        line-height: 32PX;
        min-width: 66PX;
        margin-bottom: 7PX;
      }
  }
  .distancePanel {
    border: solid 1px $--border-color-lighter;
    .distanceTable .el-input-number {
        display: none
     }
     .distanceTable .current-row .el-input-number {
       display: block
     }
     .distanceTable .current-row .el-input-number+span {
       display: none
     }
  }
  .patternPanel {
    border: solid 1px $--border-color-lighter;
  }
  .phasePanel {
    border: solid 1px $--border-color-lighter;
    .XRDDir {
        float: left;
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }
  }
  .common-comp-chart {
    background-color: $--background-color-base;
  }
  .openatc-operation {
    height: 100%;
    width: 100%;
    button {
      width: 70PX;
      height: 40PX;
      padding: 0;
      line-height: 40PX;
      border: 1px solid #dcdfe6;
      white-space: nowrap;
      outline: 0;
      transition: 0.1s;
      font-size: 14PX;
      border-radius: 4PX;
      color: $--button-primary-font-color;
      background-color: $--color-primary;
      border-color: $--color-primary;
      cursor: pointer;
    }
    button:hover {
      color: $--button-primary-font-color;
      background-color: $--color-primary;
      border-color: $--color-primary;
      opacity: 0.8;
    }
    .charts {
      width: 100%;
      height: 90%;
    }
    // .analysis-charts  {
    //   // height: calc(100% - 120PX);
    //   // height: 90%;
    //   width: 100%;
    //   .charts {
    //     position: absolute;
    //     top: 134px;
    //     width: 100%;
    //     // height: 90%;
    //     // height: calc(100% - 120PX);
    //   }
    // }
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  // 基础数据统计页面样式
  .openatc-basicdata {
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  // 操作记录页面样式
  .openatc-operationrecord {
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  // 组织机构页面样式
  // 勤务路线页面样式
  .openatc-serviceroute {
    // margin-top: 15px;
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    // border: 1px solid red;
    .funcs {
      width: 100%;
      height: 50PX;
      // border: 1px solid yellow;
      display: flex;
      .title {
        width: 10%;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 15PX;
        color: $--color-text-primary;
        font-size: 18PX;
        line-height: 40PX;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
      }
      .btnGroup{
        width: 90%;
        display: flex;
        margin-right: 15px;
        // border: 1px solid red;
        .btn-left{
          width: 50%;
          display: flex;
          align-items: center;
        }
        .btn-right{
          // border: 1px solid red;
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .container {
      width: 100%;
      height: calc(100vh - 103PX);
      .el-aside {
        height: 100%;
        color: $--color-text-primary;
        border-right: solid 1px $--border-color-lighter;
        background-color: $--color-white;
        .serviceroute-planmenu {
          height: 100%;
          // border: 1px solid red;
          .el-menu {
            // height: calc(100vh - 220PX);
            height: calc(100vh - 150PX);
            max-height: calc(100vh - 150PX);
            overflow-y: auto;
            border-right: none;
            .el-menu-item {
              height: 44px;
              display: flex;
              align-items: center;
            }
          }
          /* 原生按钮样式修改 */
          .btnGroup button {
            cursor: pointer;
          }
          /* 提示框相关 */
          .tipContent > div {
            float: left;
          }
          .tipContent div i {
            color: $--color-primary;
            font-size: 30px;
          }
          .tipContent .text {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 1px;
            color: $--color-primary;
            margin-left: 7px;
            line-height: 42px;
          }
          .tipContent .iconfont {
            color: $--color-primary;
          }
        }
      }
      .el-main {
        height: 100%;
        background-color: $--color-white;
        .serviceroute-plancontent {
          position: relative;
          height: 100%;
          .batchExecute {
            .content {
              border: solid 1px $--border-color-lighter;
              .success {
                color: $--color-success;
              }
              .danger {
                color: $--color-danger;
              }
              .primary {
                cursor: pointer;
                color: $--color-primary;
              }
            }
            .footer {
              width: 100%;
              height: 40px;
              margin-top: 20px;
              border: 0px solid red;;
              display: flex;
              .checkbox {
                width: 25%;
                border: 0px solid red;
                display: flex;
                align-items: center;
              }
              .time {
                width: 35%;
                border: 0px solid red;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .time-content {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
              .button {
                width: 40%;
                border: 0px solid red;
                display: flex;
                justify-content: flex-end;
              }
            }
          }
        }
      }
    }
  }
  .serviceroute-pattern {
    border: solid 1px $--border-color-lighter;
    .pattern-figure {
        position: fixed;
        width: 39%;
        bottom: 40px;
      }
      .pattern-status {
        display: inline;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #303133;
      }
      .pattern-explain {
        float: right;
      }
      .dir-class {
        width: 100%;
        height: 100%;
        // background: rgb(217, 236, 255);
      }
  }
  .serviceroute-device {
    .devicePanel {
        border: solid 1px $--border-color-lighter;
      }
      .addbtn {
        padding: 0;
        width: 12.5%;
        height: 40px;
        text-align: center;
        float: right;
        line-height: 40px;
        min-width: 66px;
        margin-bottom: 7px;
      }
  }
  .serviceroute-addDeviceDrawer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 10px;
    overflow: visible;
    pointer-events: all;
    .btnGroup {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        padding: 0 16px;
        display: flex;
        align-items: center;
        .btn {
            width: 50%;
        }
      }
      .devs-container {
        padding: 0 20px;
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
      }
      .filter-container {
        float: right;
        width: 100%;
      }
      .devs-table {
        border: solid 1px $--border-color-lighter;
        overflow: auto;
        max-height: 590px;
      }
  }
  .serviceroute-routeCard { 
    width: 100%;
    .btn-bottom {
      float: right;
      margin-top: -5px;
      margin-right: 15px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .grid-content-label {
      color: $--color-text-secondary;
    }
  }
  // 头部样式
.versioninfo {
    .el-dialog__headerbtn .el-dialog__close {
        color: $--color-white;
    }
    .el-dialog__header {
        padding: 50px 30px 10px;
        height: 109px;
        background-color: $--color-primary;
        border-radius: 4px 4px 0px 0p
    }
    .el-dialog__title {
        width: 291px;
        height: 38px;
        margin-top: 40px;
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14px;
        letter-spacing: 0px;
        color: #fff;
    }
    .banben {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14px;
        letter-spacing: 0px;
        color: $--color-text-regular;
    }
    .divider {
        // width: 483px;
        height: 1px;
        margin-top: 15px;
        background-color: $--border-color-light;
    }
    .open-source {
        margin-top: 25px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14px;
        letter-spacing: 0px;
        color: $--color-primary;
    }
    .agreement {
        cursor: pointer;
    }
}
.bottomTime {
  position: fixed;
  font-size: 14PX;
  color: $--color-text-regular;
  bottom:20PX;
  left: 40%;
}
// 登录页面样式
.login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: $--background-color-base;
    .switch-language {
        cursor:pointer;
        margin-top: 20px;
        margin-right: 20px;
        float: right;
      }
      .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
        input {
          background: $--color-white;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $--color-text-primary;
          height: 47px;
          &:-webkit-autofill {
            -webkit-text-fill-color: rgb(0, 0, 0) !important;
          }
          .el-input__inner {
            -webkit-appearance: none;
            background-color: $--color-white;
            background-image: none;
            border-radius: 4px;
            border: 0px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: $--color-text-regular;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
          }
        }
      }
      .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: $--color-white;
        border-radius: 5px;
        color: $--color-primary;
      }
      .login-form {
        position: absolute;
        left: 0;
        right: 0;
        //width: 33%;
        width: 20%;
        min-width: 400px;
        padding: 35px 35px 15px 35px;
        margin: 120px auto;
        .custom-msg {
          color: $--color-text-regular;
        }
      }
      .tips {
        font-size: 14px;
        color: $--color-text-secondary;
        margin-bottom: 10px;
        span {
          &:first-of-type {
            margin-right: 16px;
          }
        }
      }
      .svg-container {
        padding: 6px 5px 6px 15px;
        color: $--color-primary;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
        &_login {
          font-size: 20px;
        }
      }
      .title {
        font-size: 26px;
        font-weight: 400;
        color: $--color-primary;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
        font-stretch: normal;
      }
      .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: $--color-info;
        cursor: pointer;
        user-select: none;
      }
}
.modify-passwd {
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $--color-primary;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
    font-stretch: normal;
  }
  .subtitle {
    color: $--color-text-secondary;
    margin-left:-70px;
  }
  .passCheck {
    color: $--color-text-secondary;
  }
}
// licenseInfo关于样式
.licenseInfo {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
      height: 70%;
      overflow: hidden;
      .el-dialog__body {
          padding: 30px 20px;
          color: $--color-text-regular;
          font-size: 14px;
          word-break: break-all;
          position: absolute;
          left: 0;
          top: 70px;
          bottom: 30px;
          z-index: 1;
          overflow: hidden;
          overflow-y: auto;
      }
  }
  .el-dialog__title {
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: $--color-white;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: $--color-white;
  }
  .el-dialog__header {
    padding: 30px 10px 10px;
    height: 69px;
    background-color: $--color-primary;
    border-radius: 4px 4px 0px 0p
  }
}
#app .adminEdge {
  border-top: 1px solid $--border-color-base;
  height: calc(100% - 62PX);
}
.tagsList .highlightTag .el-icon-close{
  color: $--color-white;
}
.tagsList .highlightTag .el-icon-close:hover {
  background-color: $--border-color-extra-light;
  color: $--color-primary;
}
.tagsList .normalTag .el-icon-close{
  color: $--color-primary;
}
.tagsList .normalTag .el-icon-close:hover {
  background-color: $--color-primary;
  color: $--color-white;
}
.tagsList {
  // height: 84px;
  padding: 16PX 0 16PX 20PX;
  box-sizing: border-box;
  .el-tag {
    cursor: pointer;
    margin-left: 3px;
    font-size: 14PX;
  }
  .el-tag--mini {
    min-width: 50px;
    height: 26px;
    padding: 0 5px;
    line-height: 26px;
    text-align: center;
  }
  .toListBtn {
    width: 70PX;
    height: 26PX;
    line-height: 26PX;
    padding: 0;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    margin-bottom: 4PX;
  }
  .highlightTag {
    background-color: $--color-primary;
    border-color: $--color-primary;
    color: #FFFFFF;
  }
}
.configDrawer .el-drawer__header {
  text-align: left;
  color: $--color-text-regular;
  font-size: 18px;
}
.configDrawer .el-drawer__body {
  padding: 0 16px 70px 16px;
}
.configDrawer {
  position: relative;
  .btnGroup {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .btn {
      width: 50%;
    }
  }
  .edit-text {
    display: flex;
    align-items: center;
    height: 30PX;
    margin-left: 15PX;
    margin-top: 20PX;
    margin-bottom: 20PX;
    border: 0px solid red;
    color: $--color-text-primary;
    font-size: 18PX;
    font-weight: bold;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0px;
    .iconfont {
      font-size: 14PX;
      color: #299BCC;
      margin-right: 5PX;
    }
  }
  .name-input {
    margin: 5px 0 5px 0;
  }
}
$space-width: 18px;
.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: $space-width;
  height: 14px;
  &::before {
    content: "";
  }
}
.processContainer {
  width: 100%;
  height: 100%;
}
table td {
  line-height: 26px;
}

.tree-ctrl {
  position: relative;
  cursor: pointer;
  color: $--color-primary;
  margin-left: -$space-width;
}
// Navbar样式
.openatc-main {
  float:left;
  padding-left: 16PX;
  height: 52PX;
  line-height: 52PX;
  font-size: 22PX;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 0px;
  color: $--color-text-primary;
}
.openatc-line {
  float:left;
  margin-left: 20PX;
  margin-top: 19PX;
  width: 1PX;
  height: 14PX;
  background-color: $--color-text-placeholder;
}
.openatc-menu {
  float:left;
  font-size: 14PX;
  font-weight: normal;
  font-stretch: normal;
  height: 52PX;
  line-height: 52PX;
  letter-spacing: 0px;
  color: $--color-primary;
  .el-menu-item {
    height: 52PX;
    line-height: 52PX;
  }
}
.el-menu-demo  {
  .el-dropdown-menu {
    width: 228px;
    .el-dropdown-menu__item {
      color: $--color-text-regular;
    }
    .label {
      font-size: 12px;
      color: $--color-text-secondary;
      margin-bottom: 12px;
    }
    .content {
      font-size: 12px;
      color: $--color-text-primary;
    }
    .user {
      padding: 0 24px;
      .name {
        font-size: 20px;
        color: $--color-primary;
        margin-bottom: 14px;
        margin-top: 13px;
      }
    }
    .message {
      padding: 16px 24px 0 24px;
      margin-bottom: 10px;
      .email {
        margin-top: 22px;
      }
      .content {
        font-size: 14px;
      }
    }
  }
  }
  .user-name {
    width: 58PX;
    height: 21PX;
    margin-top: 10PX;
    font-size: 20PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-primary;
  }
  .organization {
    margin-top: 8PX;
  }
  .real-name {
    margin-top: 14PX;
    margin-bottom: 10PX;
  }
  .laber-name {
    // width: 48px;
    height: 13PX;
    font-size: 12PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-secondary;
  }
  .laber-value {
    margin-top: 5PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .switch-language {
      cursor: pointer;
      margin-top: 17px;
      margin-right: 30px;
      float: right;
    }
  .row-bg {
    padding: 10px 0;
  }
    .el-menu--horizontal {
      border-bottom: solid 1px $--border-color-base!important;
  }
  .alarm-message {
    cursor: pointer;
    margin-top: 15PX;
    margin-right: 30PX;
    float: right;
    color: $--color-text-secondary;
  }
  .menu-icon--right {
    margin-left: -5px;
  }
  //tooltip样式
  .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-top-color: $--background-color-base;
  }
  .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: $--background-color-base;
  }
  .atooltip {
    background: $--background-color-base !important;
    border-color: $--color-text-primary !important;
  }

//交通流
.dev-traffic-detail {
  .el-dialog {
    // height: calc(100%);
    height: calc(100% - 16vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }
  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .el-dialog__title {
      position: absolute;
      left: 24PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
  }
  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }
  .trafficDetector {
    // height: 100%;
    // height: calc(100vh - 50PX);
    height: calc(100vh - 20vh);
    display: flex;
    flex-direction: column;
    .title {
      line-height: 60PX;
      font-family: MicrosoftYaHei;
      font-size: 18PX;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0PX;
      color: $--color-text-primary;
    }
    .top {
      background: $--color-white;
      height: 50%;
      width: 100%;
      float: left;
      margin-bottom: 20PX;
      // overflow: hidden;
      .choosePanel {
        position: relative;
        left: 120PX;
        z-index: 999;
        height: 24PX;
      }
    }
    .select {
      position: absolute;
      z-index: 999;
      width: 107PX;
      height: 29PX;
      .el-input__inner {
        font-size: 14PX;
      }
    }
    .lefttop {
      width: 100%;
      height: 100%;
      background: $--color-white;
      padding: 0 20PX;
      box-sizing: border-box;
      box-shadow: 0PX 0PX 4PX 0PX
      rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
    }
    .chart1 {
      width: 100%;
      height: 75%;
    }
    .chart2 {
      width: 100%;
      height: calc(100% - 70PX);
    }
    .bottom {
      height: 50%;
      width: 100%;
      float: left;
    }
    .bottom-left {
      float: left;
      width: calc(70% - 20PX);
      height:100%;
      background: $--color-white;
      padding: 0 20PX;
      box-sizing: border-box;
      box-shadow: 0PX 0PX 4PX 0PX
          rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
    }
    .bottom-right {
      float: right;
      width: 30%;
      height: 100%;
      background: $--color-white;
      padding: 0 20PX;
      box-shadow: 0PX 0PX 4PX 0PX
          rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
      box-sizing: border-box;
    }
    .chartright {
      width: 100%;
      height: calc(100% - 70PX);
    }
    .choosePanel {
      position: absolute;
      z-index: 999;
    }
    .btn {
      float: left;
      min-width: 60PX;
      height: 26PX;
      background-color: $--color-white;
      border: solid 1PX $--color-primary;
      color: $--color-primary;
      border-radius: 0;
      padding: 0 6PX;
      text-align: center;
      line-height: 26PX;
      font-size: 14PX;
      margin-right: 6PX;
      cursor: pointer;
    }
    .btn:hover {
      background-color: $--color-primary;
      color: #fff;
    }
    .btnFocus {
      background-color: $--color-primary;
      border: solid 1PX $--color-primary;
      color: #fff;
    }
  }
}

// 历史路口统计

.dev-intersection-detail {
  .el-dialog {
    height: calc(100% - 30vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }

  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
      .el-input__inner {
        height: 36PX;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }

  .trafficStrength {
    height: 100%;
    .el-loading-spinner{
      font-size: 50PX;
      }
    .left {
      border: 0PX solid red;
      height: 100%;
      width: 100%;
      float: left;
        .title {
            padding-top: 25PX;
            margin-bottom: 20PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
      }
      .lefttop {
        width: 100%;
        height: 52%;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX 
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .leftbottom {
        width: 100%;
        height: calc(100% - 52% - 16PX);
        margin-top: 16PX;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .right {
        height: 100%;
        width: calc(31% - 15PX);
        float: left;
        margin-left: 15PX;
      }

      .chart1 {
        width: 100%;
        height: calc(100% - 100PX);
      }
      .chart2 {
        width: 100%;
        height: calc(100% - 70PX);
      }
      .choosePanel {
        position: relative;
        z-index: 999;
        height: 24PX;
      }
      .btn {
        float: left;
        min-width: 60PX;
        height: 26PX;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        border-radius: 0;
        padding: 0 6PX;
        text-align: center;
        line-height: 26PX;
        font-size: 12PX;
        margin-right: 6PX;
        cursor: pointer;
      }
      .btn:hover {
        background-color: $--color-primary;
        color: #fff;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    .strengthPanel {
        width: 100%;
        background: $--color-white;
        height: 52%;
        padding: 0 20PX;
        .title {
          padding-top: 25PX;
          margin-bottom: 20PX;
          font-family: MicrosoftYaHei;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0PX;
          color: $--color-text-primary;
        }
        .chart {
          width: 100%;
          height: 79%;
        }
      }
    .periodicPanel{
      margin-top: 16PX;
      width: 100%;
      height: calc(100% - 52% - 16PX);
        background: $--color-white;
        padding: 0 20PX;
        box-shadow: 0PX 0PX 4PX 0PX 
            rgba(0, 32, 60, 0.06);
        border-radius: 4PX;
        box-sizing: border-box;
        .title {
            padding-top: 25PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
        .chart {
            width: 100%;
          height: 86.4%;
        }
    }
  }
} 
// 方案统计

.dev-pattern-detail {
  .el-dialog {
    height: calc(100% - 30vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }

  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }

  .trafficStrength {
    height: 100%;
    .el-loading-spinner{
      font-size: 50PX;
      }
    .left {
        height: 100%;
        width: 69%;
        float: left;
          .title {
              padding-top: 25PX;
              margin-bottom: 20PX;
              font-family: MicrosoftYaHei;
              font-size: 18PX;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0PX;
              color: $--color-text-primary;
          }
      }
      .lefttop {
        width: 100%;
        height: 52%;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX 
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .leftbottom {
        width: 100%;
        height: calc(100% - 52% - 16PX);
        margin-top: 16PX;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .right {
        height: 100%;
        width: calc(31% - 15PX);
        float: left;
        margin-left: 15PX;
      }

      .chart1 {
        width: 100%;
        height: calc(100% - 100PX);
      }
      .chart2 {
        width: 100%;
        height: calc(100% - 70PX);
      }
      .choosePanel {
        position: relative;
        z-index: 999;
        height: 24PX;
      }
      .btn {
        float: left;
        min-width: 60PX;
        height: 26PX;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        border-radius: 0;
        padding: 0 6PX;
        text-align: center;
        line-height: 26PX;
        font-size: 12PX;
        margin-right: 6PX;
        cursor: pointer;
      }
      .btn:hover {
        background-color: $--color-primary;
        color: #fff;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    .strengthPanel {
        width: 100%;
        background: $--color-white;
        height: 100%;
        padding: 0 20PX;
        .title {
          padding-top: 25PX;
          margin-bottom: 20PX;
          font-family: MicrosoftYaHei;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0PX;
          color: $--color-text-primary;
        }
        .chart {
          width: 100%;
          height: 79%;
        }
      }
    .periodicPanel{
      margin-top: 16PX;
      width: 100%;
      height: calc(100% - 52% - 16PX);
        background: $--color-white;
        padding: 0 20PX;
        box-shadow: 0PX 0PX 4PX 0PX
            rgba(0, 32, 60, 0.06);
        border-radius: 4PX;
        box-sizing: border-box;
        .title {
            padding-top: 25PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
        .chart {
            width: 100%;
          height: 86.4%;
        }
    }
    .tooltiplabel {
      display: inline-block;
      width: 60PX;
      margin-right: 14PX;
      line-height: 26PX;
    }
  }
} 
// 操作记录json弹窗
.recordJsonModal {
  width: 900px;
  pre {
    max-height: 880px;
    overflow: auto;
  }
}
// 故障记录
.faultPage {
  // position: relative; // 父元素定位会影响子元素的offset高度计算
  height: 100%;
  .tabButton {
    position: absolute;
    left: 20PX;
    top: 88PX;
    .btn {
      float: left;
      min-width: 100PX;
      padding: 0px 20px;
      height: 40PX;
      line-height: 40PX;
      text-align: center;
      font-size: 16PX;
      font-weight: 400;
      background-color: $--color-white;
      border: solid 1PX $--color-primary;
      color: $--color-primary;
      cursor: pointer;
      margin-right: 0;
    }
    .btnFocus {
      background-color: $--color-primary;
      border: solid 1px $--color-primary;
      color: #fff;
    }
  }
  .openatc-historyfaultrecord {
    .filter-container {
      float: right;
      padding-left: 340PX;
    }
    .inner-table {
      margin: 0 20PX;
      border: solid 1PX $--border-color-lighter;
    }
  }
  .openatc-realtimefaultrecord {
    padding-top: 80PX;
  }
}  //故障记录页面样式
.openatc-faultrecord {
  .el-range-editor .el-range-input {
    background-color: $--color-white;
  }
  .el-date-editor .el-range-separator {
    padding: 0
  }
  .el-range-editor--small .el-range-separator {
    line-height: 32PX;
  }
}